<template>
    <div class="dialog-wrap" v-if="isShow">
        <div class="content">
            <div class="input">
                <input type="text" v-model="url" @keyup.enter="handleAddClick" placeholder="请输入网址..." :disabled="isSubmit">
            </div>
            <div class="btns">
                <button @click="handleAddClick" :disabled="isSubmit">添加</button>
                <button @click="handleCancelClick" :disabled="isSubmit">取消</button>
            </div>
        </div>
    </div>
</template>

<script setup>
  import { ref,inject,onMounted } from 'vue'
  import  useWebsiteStore  from '@/store/websiteStore'
  

  const isSubmit = ref(false)

  const websiteStore = useWebsiteStore()

  //经过测试,这里结构出来的isShow是具备响应性的
  const { isShow,setIsShow } = inject('dialog-visible')

  //这里解构出来的url是ref的响应式对象,因为url被定义的时候就是ref响应式对象
  // const { url } = inject('dialog-url')

  const url = ref('')

  
  const handleAddClick = async () => {
      isSubmit.value = true
      const result = await window.myApi.sendUrl(url.value)
      if(result.msg) {
        window.myApi.alert(result.msg)
        isSubmit.value = false
        setIsShow(false)
      }else {
      websiteStore.add(result)
      isSubmit.value = false
      setIsShow(false)
      }
      url.value = ''
  }

  const handleCancelClick = () => {
    setIsShow(false)
    url.value = ''
  }

  
</script>

<style lang="scss" scoped>
    .dialog-wrap {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.8);
        z-index: 1000;

  .content {
    width: 100%;
    padding: 0 20px;
    
    input {
      height: 30px;
      width: 100%;
      outline: none;
      margin-bottom: 10px;
      font-size: 12px;
    }
    
    .btns {
      button {
        height: 30px;
        margin-right: 10px;
        font-size: 12px;
        padding: 0 20px;
      }
    }
  }
}
</style>